<template>
    <div class="main">
        <div class="title">
            <div class="hot">国内数据</div>
        </div>
        <div class="time">截止{{ covData.modifyTime | time }}全国数据统计</div>
        <div class="content">
            <van-row>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.currentConfirmedIncr | number }}</span></p>
                    <p class="num big">{{ covData.currentConfirmedCount | num }}</p>
                    <strong>现存确诊</strong>
                </van-col>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.suspectedIncr | number }}</span></p>
                    <p class="num big">{{ covData.suspectedCount | num }}</p>
                    <strong>境外输入</strong>
                </van-col>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.seriousIncr | number }}</span></p>
                    <p class="num big">{{ covData.seriousCount | num }}</p>
                    <strong>现存无症状</strong>
                </van-col>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.confirmedIncr | number }}</span></p>
                    <p class="num big">{{ covData.confirmedCount | num }}</p>
                    <strong>累计确诊</strong>
                </van-col>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.deadIncr | number }}</span></p>
                    <p class="num big">{{ covData.deadCount | num }}</p>
                    <strong>累计死亡</strong>
                </van-col>
                <van-col span="8">
                    <p>较昨日<span class="num">{{ covData.curedIncr | number }}</span></p>
                    <p class="num big">{{ covData.curedCount | num }}</p>
                    <strong>累计治愈</strong>
                </van-col>

            </van-row>
        </div>
    </div>
</template>
  

<script>
import moment from 'moment'
export default{
    props:['covData'],
    filters:{
        //处理日期格式
        time(val){
            // if(!val) return '';
          return  moment(val).format('YYYY/MM/DD HH:mm:ss');
        },
        //处理 + 问题
        number(val){
            val = val>0 ? '+'+val : val;
            return val 
        },
        //处理每三位补一个逗号,
        num(val){
            return val.toLocaleString();
        }
    }

    /*** 
        currentConfirmedCount   现存确诊人数
        confirmedCount          累计确诊人数
        suspectedCount          累计境外输入人数
        curedCount              累计治愈人数
        deadCount               累计死亡人数
        seriousCount            现存无症状人数
        suspectedIncr           新增境外输入人数
        currentConfirmedIncr    相比昨天现存确诊人数
        confirmedIncr           相比昨天累计确诊人数
        curedIncr               相比昨天新增治愈人数
        deadIncr                相比昨天新增死亡人数
        seriousIncr             相比昨天现存无症状人数
        

        modifyTime              时间
       ***/
}


</script>



<style lang="less" scoped>
  .title{
        margin: 0.2rem;
        display: flex;
        //伪类生成竖线
        &::before{
            content: "";
            width: 0.1rem;
            height: 0.32rem;
            margin: 0.05rem;
            background:#4169e2;
        }

        .hot{
            margin-left: 0.14rem;
        }
    }
    .time{
        font-size: 0.28rem;
        color: rgb(86, 81, 81);
        margin-left: 0.2rem;
    }
    .content{
        margin: 0.3rem;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0.08rem;
        text-align: center;
        padding-top: 0.2rem;
        .van-col{
            margin-bottom: 0.2rem;
        }
        .big{
            font-size: .36rem;
            font-weight: bold;
        }
        .van-col:nth-child(1){
            .num{
                color: red;
            }
        }
        .van-col:nth-child(2){
            .num{
                color: green;
            }
        }
        .van-col:nth-child(3){
            .num{
                color: rgb(127, 127, 13);
            }
        }
        .van-col:nth-child(4){
            .num{
                color: purple;
            }
        }
        .van-col:nth-child(5){
            .num{
                color: coral;
            }
        }
        .van-col:nth-child(6){
            .num{
                color: skyblue;
            }
        }


    }
</style>